import React, { useEffect, useState,useRef } from "react";
import * as echarts from "echarts";
import GetDataById from "./UseSchoolData";

function DrawBarGraph(props) {
    var ItemList = props.List;
    var CountNum = props.Count;
	var chartRef = useRef(null);
    const colorset = [ 
        '#4189e1','#87ceeb',
        '#ffff00','#ff9912',
        '#7fff00','#da70d6',
        '#ffff00','#ff9912',
        '#4189e1','#87ceeb',
        '#ffff00','#ff9912'];
	useEffect(() => {  
		const chartInstance = echarts.init(chartRef.current);
            var titleArr = ['华东', '华中', '华西', '华南', '华北'];
            var seriesData = [];
            var UseData = [];
            for(var i=0;i<ItemList.length;i++)
            {
                var id = Number(ItemList[i]);
                var BaseData=GetDataById(id);
                var DataItem = {
                    name: BaseData.name,
                    type: 'bar',
                    barWidth: 20 - ItemList.length, //适当调整条形图宽度
                    barGap: '0%',
                    barCategoryGap: '20%',
                    data: [BaseData.east,BaseData.middle,BaseData.west,BaseData.south,BaseData.north],
                    itemStyle: {
                      color: {
                        type: 'linear',
                        x: 0,
                        y: 1,
                        x2: 0,
                        y2: 0,
                        colorStops: [
                          {
                            offset: 0,
                            color: '#8BDCFF' // 0% 处的颜色
                          },
                          {
                            offset: 1,
                            color: '#4594E8' // 100% 处的颜色
                          }
                        ],
                        global: false // 缺省为 false
                      },
                      normal: {
                        //柱形图上方标题
                        label: {
                          show: true,
                          position: 'top',
                          textStyle: {
                            color: '#000000',
                            fontSize: 16 - ItemList.length
                          }
                        },
                        barBorderRadius: [24, 24, 0, 0],
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //颜色渐变,暂时没有做
                          {
                            offset: 0,
                            color: colorset[i]
                          },
                          {
                            offset: 0.5,
                            color: colorset[i]
                          },
                          {
                            offset: 1,
                            color: colorset[i]
                          }
                        ])
                      }
                    }                    
                }
                seriesData.push(DataItem);
                var UseDatastr = BaseData.name;
                UseData.push(UseDatastr);
            }
            var option = {
                title: {
                    text: '就业情况条形图',
                    top: 10,
                    left: 10,
                  },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                }
              },
              legend: {
                type:'scroll',
                top: '90%',
                data: UseData,
                textStyle: {
                  //字体颜色
                  color: '#333333',
                  fontSize: 12
                }
              },
              grid: {
                top: '20%',
                left: '10%',
                right: '10%',
                bottom: '15%',
                containLabel: true
              },
              yAxis: {
                type: 'value',
            
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: '#1a4b98',
                    type: 'solid'
                  }
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#009dff'
                  }
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  color: '#333333'
                }
              },
              xAxis: {
                type: 'category',
                data: titleArr,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#009dff'
                  }
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  color: '#333333', //x轴字体颜色
                  textStyle: {
                    fontSize: 16
                  },
                  formatter: function (params) {
                    var newParamsName = "";// 最终拼接成的字符串
                    var paramsNameNumber = params.length;// 实际标签的个数
                    var provideNumber = 4;// 每行能显示的字的个数
                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                    /**
                      * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                      */
                    // 条件等同于rowNumber>1
                    if (paramsNameNumber > provideNumber) {
                      /** 循环每一行,p表示行 */
                      for (var p = 0; p < rowNumber; p++) {
                        var tempStr = "";// 表示每一次截取的字符串
                        var start = p * provideNumber;// 开始截取的位置
                        var end = start + provideNumber;// 结束截取的位置
                        // 此处特殊处理最后一行的索引值
                        if (p == rowNumber - 1) {
                          // 最后一次不换行
                          tempStr = params.substring(start, paramsNameNumber);
                        } else {
                          // 每一次拼接字符串并换行
                          tempStr = params.substring(start, end) + "\n";
                        }
                        newParamsName += tempStr;// 最终拼成的字符串
                      }
            
                    } else {
                      // 将旧标签的值赋给新标签
                      newParamsName = params;
                    }
                    //将最终的字符串返回
                    return newParamsName
                  }
                }
              },
              series: seriesData
            };
		chartInstance.setOption(option,true);
	}, [CountNum]);
	return (
		<div>
			<div
				ref={chartRef}
				style={{ width: "640px", height: "450px" }}
			/>
		</div>
	);
}
export default DrawBarGraph;
